<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>欢迎注册</title>
	<link rel="stylesheet" href="css/regist.css">
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
	<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
	<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
	<script src="js/gVerify.js"></script>
	<script src="js/main.js"></script>
</head>

<body>
<div class="top" id="top">
	<div class="header" id="header">
		<div class="img">
			<img src="image/图片1.png" alt="" width="100px" height="100px">
		</div>
		<h1 style="margin-left: 20px">用户注册</h1>
		<h6 class="header_h2" id="header_h2">已有账号？马上登录</h6>
	</div>
</div>
<div class="wel" id="wel">
	<h2>欢迎注册!</h2>
</div>
<div class="register_button">
	<div class="btn" id="btn">
		<button type="button" class="btn btn-primary" id="regist_by_name">用户名注册</button>
		<button type="button" class="btn btn-success" id="regist_by_phone">手机号注册</button>
		<button type="button" class="btn btn-info" id="regist_by_email">邮箱注册</button>
	</div>
</div>
<div class="btn2">
	<div class="img" id="img1">
		<div id="myCarousel" class="carousel slide">
			<!-- 轮播（Carousel）指标 -->
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
				<li data-target="#myCarousel" data-slide-to="3"></li>
			</ol>
			<!-- 轮播（Carousel）项目 -->
			<div class="carousel-inner">
				<div class="item active">
					<img src="image/1.jpg" alt="First slide">
					<div class="carousel-caption">标题 1</div>
				</div>
				<div class="item">
					<img src="image/2.jpg" alt="Second slide">
					<div class="carousel-caption">标题 2</div>
				</div>
				<div class="item">
					<img src="image/3.jpg" alt="Third slide">
					<div class="carousel-caption">标题 3</div>
				</div>
				<div class="item">
					<img src="image/4.jpg" alt="Four slide">
					<div class="carousel-caption">标题 4</div>
				</div>
			</div>
			<!-- 轮播（Carousel）导航 -->
			<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
	</div>
	<!--	用户名注册-->
	<div id="register_Name" style="display: none" class="register_Name">
		<form class="form-horizontal" role="form" action="/register_by_Name">
			<div class="form-group">
				<label for="firstname" class="col-sm-2 control-label">用户名</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="firstname" placeholder="请输入名字">
					<span>以英语数字开头，可加下划线</span>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd" class="col-sm-2 control-label">输入密码</label>
				<div class="col-lg-4">
					<input type="password" class="form-control" id="pwd" placeholder="输入密码">
					<span>密码至少六个字符</span>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd2" class="col-sm-2 control-label">确认密码</label>
				<div class="col-lg-4">
					<input type="password" class="form-control" id="pwd2" placeholder="请确认密码">
					<span>与登录密码保持一致</span>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd2" class="col-sm-2 control-label">真实姓名</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="name2" placeholder="真实姓名">
					<span>真实姓名</span>
				</div>
			</div>
			<div class="form-group">
				<label for="phone_name" class="col-sm-2 control-label">电话号码</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" placeholder="电话号码" maxlength="11" id="phone_name">
					<span id="span_name"></span>
				</div>
			</div>
			<div class="form-group">
				<label for="address" class="col-sm-2 control-label">地址</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="address" placeholder="输入您的地址" maxlength="11">
					<span>输入您的地址</span>
				</div>
			</div>
			<div class="form-group">
				<label for="code_input" class="col-sm-2 control-label">验证码</label>
				<div class="col-lg-4">
					<input type="password" class="form-control" placeholder="点击切换验证码" maxlength="6" id="code_input">
					<div id="v_container" class="code"></div>
				</div>

			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<div class="checkbox">
						<label>
							<input type="checkbox">同意
							<span style="color: #2b87ef">"注册协议"</span>
						</label>
					</div>
				</div>
			</div>
			<div class="sub">
				<div class="form-group">
					<button type="button" class="btn btn-success" id="my_button">注册</button>
				</div>
			</div>
			<div class="restart">
				<div class="form-group">
					<button type="reset" class="btn btn-info">重置</button>
				</div>
			</div>
			<div class="restart1">
				<div class="form-group">
					<button type="button" class="btn btn-danger" id="return">重置1</button>
				</div>
			</div>

		</form>
	</div>

	<!--电话号注册-->
	<div id="register_Phone" style="display:none;" class="register_Name">
		<form class="form-horizontal" role="form" action="/register_by_Phone" id="register_by_phone">
			<div class="form-group">
				<label for="phone" class="col-sm-2 control-label">电话号</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" placeholder="请输入电话" id="phone">
					<span id="checkExistPhone"></span>
				</div>
			</div>
			<div class="form-group">
				<label for="checkExistCode" class="col-sm-2 control-label">验证码</label>
				<div class="col-lg-4">
					<input type="password" class="form-control" placeholder="" maxlength="6" id="checkExistCode">
				</div>
			</div>

		</form>
	</div>
	<div id="register_Email" style="display:none;" class="register_Name">
		<form class="form-horizontal" role="form" action="/register_by_Email">
			<div class="form-group">
				<label for="email" class="col-sm-2 control-label">邮箱</label>
				<div class="col-lg-4">
					<input type="text" class="form-control" id="email" placeholder="请输入名字">
					<span>以英语数字开头，可加下划线</span>
				</div>
			</div>

			<div class="form-group">
				<label for="code_input2" class="col-sm-2 control-label">验证码</label>
				<div class="col-lg-4">
					<input type="password" class="form-control" placeholder="点击切换验证码" maxlength="6" id="code_input2">
				</div>
			</div>
		</form>

	</div>
</div>

</body>
<script>
    $(function () {

        $("#return").click(function () {
            location.reload();
        });
        $("#regist_by_name").click(function (event) {
            console.log("用户名注册")
            $("#register_Name").attr("style", "display:block;");//显示div
            $("#img1").attr("style", "left:10%;");
            $("#top").attr("style", "height:0;");
            $("#btn").attr("style", "display:none;");
            $("#header_h2").attr("style", "display:none;");
            $("#register_Phone").attr("style", "display:none;");//显示div
            $("#register_Email").attr("style", "display:none;");//显示div
            // $("#register_Name").toggle();
        });
        $("#regist_by_phone").click(function (event) {
            console.log("手机号注册")
            $("#register_Phone").attr("style", "display:block;");//显示div

            $("#img1").attr("style", "left:10%;");
            $("#top").attr("style", "height:0;");
            $("#btn").attr("style", "display:none;");
            $("#header_h2").attr("style", "display:none;");

            $("#register_Name").attr("style", "display:none;");//显示div
            $("#register_Email").attr("style", "display:none;");//显示div
            //  $("#register_Name").toggle();
        });
        $("#regist_by_email").click(function (event) {
            console.log("邮箱注册")
            $("#register_Email").attr("style", "display:block;");//显示div

            $("#img1").attr("style", "left:10%;");
            $("#top").attr("style", "height:0;");
            $("#btn").attr("style", "display:none;");
            $("#header_h2").attr("style", "display:none;");

            $("#register_Phone").attr("style", "display:none;");//显示div
            $("#register_Name").attr("style", "display:none;");//显示div
            //  $("#register_Name").toggle();
        });
    })

</script>
<script>
    var verifyCode = new GVerify("v_container");
    document.getElementById("my_button").onclick = function () {
        var res = verifyCode.validate(document.getElementById("code_input").value);
        if (res) {
            alert("验证正确");

        } else {
            alert("验证码错误");
        }
    }
</script>

</html>
